<script setup>
import LayoutNav from '@/views/Layout/components/LayoutNav.vue'
import {  GetSquareListService,GetCommentListService,PostArticleLikeService,sendComment } from '@/api/square.js'
import { ref } from 'vue';
// import { getCategoryAPI } from '@/apis/layout.js';
import {PostArticleService,upload} from '@/api/square.js'
import {useRouter} from 'vue-router'
const router=useRouter()
const ActicleForm=ref({
  title:'',
  content:'',
  pictures:[]
})
const postArticle=async()=>{
  console.log("发布文章内容",ActicleForm.value);
  const res =await PostArticleService(ActicleForm.value)
  // console.log(res);
  ElMessage.success('发布成功')
  // router.push('/square')
  getSquareList()
  ArticleShow.value=false
  
}

//收集文章图片
const imgList=ref([])

const pictureUpload= async function (file){
    console.log(file)
    const formData = new FormData();
    formData.append('file',file)
    const res = await upload(formData)

    const url = res.data.data
    imgList.value.push(url) 
    ActicleForm.value.pictures.push(url)
    console.log(res)
}
//广场列表
const SquareList=ref([])
const UserList=ref([])
//某文章的所有评论
const CommentList=ref([])
const getSquareList=async()=>{
  const res=await GetSquareListService()
  res.data.data.reverse()
  SquareList.value=res.data.data
  console.log('广场列表',SquareList.value);
  console.log("用户id",SquareList.value[0].userId)
}
getSquareList()

const commentShow=ref()

const handleChange=async(productId)=>{
  console.log('展开',productId);
  const res=await GetCommentListService(productId)
  CommentList.value=res.data.data
  console.log('评论列表',CommentList.value);
  // console.log('评论列表',res);
}

const countLike=ref(0)
const addzan=async(id)=>{
  console.log('点赞',id);
  countLike.value++
  if(countLike.value<5){
    await PostArticleLikeService(id)
    getSquareList()
  }else{
    ElMessage.warning('每天只能点赞5次哦')
  }
}
const commentId=ref(0)
const commentText=ref('')
const showComment=ref(false)
const addComment=(id)=>{
  showComment.value=true
  commentId.value=id
}
const submitComment=async()=>{
  let obj={
    content: ""
  }
  obj.content=commentText.value
  const result=await sendComment(commentId.value,obj)
  console.log(result);
  const res=await GetCommentListService(commentId.value)
  CommentList.value=res.data.data
  showComment.value=false
  commentText.value=''
  getSquareList()
}
const ArticleShow=ref(false)

</script>

<template>
<div style="background-color:#d8e3d0 ;">
  <LayoutNav />
    <h1 class="titleh1">茶现广场</h1>

<!--    添加文章    -->
    <el-button class="el-icon-plus" style="float: right;margin-right: 100px;" type="primary"  @click="ArticleShow = true">
      发布文章
    </el-button>




    <el-dialog title="发布文章" v-model="ArticleShow">
      <!-- <el-form :model="form">
        <el-form-item label="文章标题" style="display: inline-block;width: 600px">
          <el-input></el-input>
        </el-form-item>

        <el-form-item label="文章内容">
          <el-input type="textarea"></el-input>
        </el-form-item>

        <div class="demo-image">
          <div class="block" v-for="fit in fits" :key="fit"
               style="display: inline-block;width: 150px; height: 150px;margin-left: 30px"
          >
            <el-image
                style="width: 150px; height: 150px"
                :src="url"
                :fit="fit"></el-image>
          </div>
        </div>

        <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        上传图片
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="ArticleShow = false">取 消</el-button>
        <el-button type="primary" @click="ArticleShow = false">发 布</el-button>
      </div> -->
      <el-form :model="ActicleForm">
    <el-form-item label="文章标题">
      <el-input v-model="ActicleForm.title" placeholder="请输入文章标题"></el-input>
    </el-form-item>
    <el-form-item label="文章内容">
      <el-input type="textarea" v-model="ActicleForm.content" placeholder="请输入文章内容"></el-input>
    </el-form-item>
    <el-form-item label="文章图片">
      <div v-for="(pic,index) in imgList" :key="index" class="picture">
        <img  :src="pic">
      </div>
      <el-upload
        list-type="picture-card"
        :before-upload="pictureUpload">
      <el-icon><Plus /></el-icon>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="postArticle" style="width: 150px;margin-left: 500px" >确认发布</el-button>
    </el-form-item>
  </el-form>
    </el-dialog>











<div style="margin-left: 350px;">
    <ul>
      <li v-for="item in SquareList" :key="item.id" style="margin-top: 20px;">
        <!--   用户头像  -->
        <el-avatar :size="50" :src="item.user.avatar" style="height: 50px"></el-avatar>
        <!--   昵称-->
        <span style="display: inline-block;color: #27ba9b;
            font-size: 20px;margin-left: 10px;margin-bottom: 10px;">
          {{item.user.nickname}}
        </span>
        <!-- 文章内容 -->
        <el-card class="box-card" style="width: 1000px">
        <div slot="header" class="clearfix">
          <div class="title">{{ item.title }}</div>
        </div>
        <div class="content">
          <span>&nbsp;</span>
          {{ item.content }}
        </div>

        <!-- 文章图片   -->
        <div class="demo-image">
          <div class="block" style="display: inline-block;width: 150px; height: 150px;margin-left: 30px">
            <!-- <el-image
                style="width: 150px; height: 150px"
                :src="item.pictures"
                :fit="fit"></el-image> -->
                <div class="goods-list">
              <ul>
              <li v-for="pic in item.pictures" :key="pic.id" style="width: 200px; height: 200px ;">
                <img :src="pic.picture" alt="">
              </li>
            </ul>
          </div>
          </div>
        </div>
        
      </el-card>
      
      
    <el-card class="box-card" style="width: 1000px">
      <div style="display: block;width: 1000px;margin-bottom: 50px">
        <div style="float: right">
          <span class="zan" style="margin-right: 20px;"><i class="iconfont icon-dianzan"  @click="addzan(item.id)" ></i>{{ item.likeNumber }}</span>
          <span style="margin-left:10px;margin-right: 50px;"><i class="iconfont icon-xiaoxi" @click="addComment(item.id)">{{ item.comments.length }}</i></span>
        </div>
      </div>
        <div style="margin-bottom: 20px;">
          <el-collapse v-model="commentShow" @change="handleChange(item.id)">
          <el-collapse-item title="评论详情">
            <ul>
              <li v-for="comment in CommentList" :key="comment.id" >
                <div>
                  <el-avatar :size="50" :src="comment.user.avatar" style="height: 50px"></el-avatar>
                  <div style="margin-bottom: 10px;display: inline-block;font-size: 16px;color: #27ba9b">{{comment.user.nickname}}</div>
                </div>
                <div style="margin-left: 80px;margin-bottom: 10px;"> {{comment.content}}</div>
                
              </li>
            </ul>
          </el-collapse-item>
        </el-collapse>
      </div>
      </el-card>
      </li>
    </ul>
  </div>
    <!-- <div v-for="i in 3" class="article">

      <div>
        <el-card class="box-card" style="width: 1000px">
          <div slot="header" class="clearfix">
            <span>评论列表</span>
          </div>
          <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto;margin-left: -40px">

            <li v-for="i in count" class="infinite-list-item"  style="margin-bottom: 25px">

              <div style="width: 800px;">

                
                <el-avatar :size="50" :src="circleUrl" style="height: 50px"></el-avatar>
               
                <span>兜兜里有钱</span>

                <el-badge :value="3" class="item" style="float: right">
                  <el-button class="el-icon-thumb" ></el-button>
                </el-badge>
              </div>

              <div>
                评论内容：
                1{{ i }}
              </div>


            </li>
          </ul>

        </el-card>
      </div>

      <div>
        <el-input style="display: inline-block;width: 800px" v-model="comment"></el-input>
        <el-button class="el-icon-s-promotion" type="primary">发布评论</el-button>
      </div>

    </div>
  </div> -->


  <div>
    <el-dialog v-model="showComment" style="width:30%">
      <h2 style="margin-bottom: 10px">发表评论</h2>
      <el-input v-model="commentText" placeholder="请输入评论内容"></el-input>
      <el-button type="primary" @click="submitComment" style="margin-left: 300px;margin-top: 20px;">确认发表</el-button>
    </el-dialog>
  </div>
</div>
</template>

<style scoped lang="scss">
.picture{
  display: inline-block;
  margin-right: 10px;
  img{
    width: 150px;
    height: 150px;
  }
}
.cneter{
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  //居中
  
}
.titleh1{
  //居中
  margin: 0 auto;
  margin-top: 30px;
  text-align: center;
}
  .user-info{
    background-color: red;
    height: 100px;
    display: inline-block;
  }

  .title{
    height: 20px;
    // background-color: cornflowerblue;
    font-size: 28px;
    font-weight: bolder;
    display: block;
    width: 600px;
    margin-bottom: 30px;
  }

  .content{
    // background-color: chocolate;
    display: block;
    width: 800px;
    font-size: 20px;
    line-height: 40px;
    margin-bottom: 40px;
  }

  li{
    list-style-type: none;
  }

  .item {
    margin-top: 10px;
    margin-right: 40px;
  }

  .article{
    margin-bottom: 120px;
  }
  .goods-list {
      margin: 10px 0;
    // display: flex;
    // justify-content: space-between;
    // list-style-type: none;
    width:900px;
    // height: 426px;
    
    ul{
      border-radius: 0 0 10px 10px;
      li {
      width: 200px;
      height: 200px;
      display:inline-block;
      transition: all .5s;
      margin-right:20px;

      img {
        width: 100%;
        height: 100%;
      }

    }
    }
  }

</style>